<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix" style="line-height: 33px">
        <el-page-header @back="$router.back()" :content="cardConfig.title" v-if="cardConfig.pageHeader" style="float: left" />
        <span v-else>{{ cardConfig.title }}</span>
        <div class="yl-card-state" v-if="cardConfig.prjStateConfig && Object.keys(cardConfig.prjStateConfig.prjState).length !== 0">
          <span style="margin-right: 30px">
            项目状态:
            <span :class="cardConfig.prjStateConfig.prjState.class">{{cardConfig.prjStateConfig.prjState.state}}</span>
          </span>
          <YlButton uiType="plain" icon="el-icon-s-release" @click="openStateDrawer">审核日志</YlButton>
        </div>
      </div>
      <YlForm
        :formConfig="cardConfig.formConfig"
        :isFormList="isFormList"
        @init-state="getInitState"
      />
    </el-card>

    <!-- 抽屉 -->
    <el-drawer
      title="审核状态"
      :visible.sync="isOpenDraw"
      direction="rtl"
      :with-header="false">
      <h1
        style="padding: 20px 30px; font-size: 1.25em; font-weight: 700"
      >
        <span>审核状态</span>
      </h1>
      <!-- 时间线 -->
      <div class="block">
        <el-timeline>
          <el-timeline-item
            v-for="(item, index) in drawArr"
            :key="index"
            :timestamp="item.nns_create_time"
            placement="top"
          >
            <el-card>
              <el-form label-width="auto" class="yl-form-item-inline__content">
                <el-form-item label="审核人：">
                  <span class="info">{{ item.nns_op_name }}</span>
                </el-form-item>
                <el-form-item label="审核结果：">
                  <span class="info">{{ item.nns_action_result }}</span>
                </el-form-item>
                <el-form-item label="描述：">
                  <span class="info">{{ item.nns_op_info }}</span>
                </el-form-item>
              </el-form>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: 'YlCard',
  props: {
    cardConfig: {
      type: Object,
      default: () => {}
    },
    isFormList: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      drawArr: [],
      isOpenDraw: false
    }
  },
  created () {
    this.getPrjStateInfo()
  },
  methods: {
    getPrjStateInfo () {
      if (
        this.cardConfig.prjStateConfig &&
        this.cardConfig.prjStateConfig.auditLog &&
        Object.prototype.toString.call(this.cardConfig.prjStateConfig.auditLog) === '[object Array]'
      ) {
        this.drawArr = this.cardConfig.prjStateConfig.auditLog
      }
    },

    getInitState (val) {
      this.$emit('init-state', val)
    },

    // 打开右侧抽屉框
    openStateDrawer () {
      this.isOpenDraw = true
    }
  }
}
</script>

<style lang="scss" scoped>
  .yl-card-state {
    float: right;
    display: flex;
    flex: 1;
  }
  .el-timeline {
    padding: 0 40px
  }
</style>
